<template>
    <Layout>
        <Form ref="form2" :model="form2" :label-width="120">
            <Row>
                <Col span="10">
                    <FormItem label="用户名:">
                        <Input type="text" v-model="form2.userName"></Input>
                    </FormItem>
                </Col>
                <Col span="14">
                    <Button    style="margin-left: 8px" @click="query">查询</Button>
                  <Button @click="reset"
                          style="margin-left: 8px;background-color:RGB(98,107,125);border-color:RGB(98,107,125)">重置
                  </Button>
                </Col>
            </Row>
        </Form>

        <Table class="table" no-data-text="没有查询到相关数据!" max-height="400px"
               highlight-row stripe border :columns="columns1" width="100%" height="450" :data="notInListData">
        </Table>
        <Page  :page-size="pagedata.size" :total="pagedata.total" :current="pagedata.starPage" @on-change="pagechange" :page-size-opts="pageSizeArray"
               show-total show-sizer show-elevator />
    </layout>
</template>

<script>
    import {Api} from '../../../api/index.js'

    export default {
        props: ['notInListData','groupId','companyId','totalNum1','pageNum1'],
        watch:{
            "totalNum1": {
                handler: function (val, oldVal) {
                    this.pagedata.total = val;
                }
            },
             "pageNum1": {
                handler: function (val, oldVal) {
                    this.pagedata.starPage = val;
                }
            }
        },
        data() {
            return {
                form2:{
                    userName: ''
                },
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: this.notInListData.length,
                    size: 10,
                    starPage: 1,
                },
                columns1: [{
                   type: 'index',
                  title: '序号',
                    width: 100,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    title: '名称',
                    minWidth: 250,
                    align: 'center',
                    key: 'userName'
                },
                {
                    title: '组织机构',
                    minWidth: 250,
                    align: 'center',
                    key: 'orgName'
                },
                {
                    title: '操作',
                    key: 'action',
                    fixed: 'right',
                    minWidth: 140,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('A', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    fontSize:'12px'
                                },
                                on: {
                                    click: () => {
                                        this.save(params.row);
                                    }
                                }
                            }, '选择')
                        ]);
                    }
                }],
                dataTable: []
            }
        },
        mounted: function() {
        },
        methods: {
            pagechange(pageNum){
                this.pagedata.starPage = pageNum;
                this.query();
            },
            save(row){
                this.userData = [];
                var user ={'userId':row.userId,'userName':row.userName};
                this.userData.push(user);
                var url3 = Api.addUserWithGroup+this.groupId;
                this.$http.post(url3,this.userData ).then((res) => {
                if (res.data.message=="success"){
                   this.$emit('getSelectData');
                    this.$Message.success('成功!');
                    this.pagedata.starPage = 1;
                }
                })
                },
             //查
            query() {
                let data = {
                    starPage: this.pagedata.starPage,
                    size: this.pagedata.size
                }
                data.groupId = this.groupId;
                data.orgId = this.companyId;
                data = Object.assign(data,JSON.parse(JSON.stringify(this.form2)));
                this.$http.get(Api.userNotInGoupId+this.groupId, {params : data}).then(res => {
                    this.notInListData = res.data.rows;
                    this.pagedata.total = res.data.total;
                }).catch(e => {
                    //this.$Message.error('请求失败');
                })
            },
            reset() {
                this.form2 = {
                    userName: ''
                }
            }
        }
    }
</script>
